<template>
  <lay-layer v-model="visible" :shade="true" :shadeClose="false" shadeOpacity="0.2" :area="['500px', '300px']" :success="init" :btn="action">
    <div style="padding: 20px">
<!--      lg sm xs-->
      <lay-tree-select size="lg" style="width: 100%;" v-model="roleMenuIdList" :data="allMenuTree" placeholder="请选择" :multiple="true" :checkStrictly="false">
      </lay-tree-select>
    </div>
  </lay-layer>
</template>
<script setup lang="ts">
import useFxwForm from "@/hooks/useFxwForm";
import { ref } from 'vue';
import {selectMenuIdListByRoleId,selectAllForLayMenuTree} from "@/api/module/menu";
import {permissionRole} from "@/api/module/role";

const {changeVisible,visible} = useFxwForm()

const props = defineProps({
  roleId: {
    type: Number,
    default: ''
  }
});

// 数据初始化
const roleMenuIdList = ref([]);
const allMenuTree = ref([]);
const init = ()=>{
  // 所有菜单
  selectAllForLayMenuTree().then(res=>{
    allMenuTree.value = res.data;
  })
  // 角色菜单
  selectMenuIdListByRoleId(props.roleId).then(res=>{
    roleMenuIdList.value = res.data;
  })
}

// 授权
const permissionBo = ref({
  roleId:0,
  menuIdList: []
});
const toPermissionRole = ()=>{
  permissionBo.value.roleId = props.roleId;
  permissionBo.value.menuIdList = roleMenuIdList.value;
  permissionRole(permissionBo.value).then(res=>{
    if (res.code == 200) {
      changeVisible();
    }
  })
}

const action = ref([
  {
    text: "确认",
    callback: () => {
      toPermissionRole();
    }
  },
  {
    text: "取消",
    callback: () => {
      changeVisible();
    }
  }
])


defineExpose({
  changeVisible
})
</script>

<style scoped>


</style>